<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>C语言在线考试系统 | 登录</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" th:href="@{/libs/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/libs/semantic-ui/semantic.min.css}" />
<link rel="stylesheet" th:href="@{/libs/adminlte/css/AdminLTE.min.css}"/>
<link rel="stylesheet" th:href="@{/libs/font-awesome/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/libs/Ionicons/css/ionicons.min.css}">
<link rel="stylesheet" th:href="@{/libs/validate/validate.css}" />
<link rel="stylesheet" th:href="@{/libs/iCheck/square/blue.css}" />
<link rel="stylesheet" th:href="@{/css/login.css}" />
<link rel="stylesheet" th:href="@{/css/exam-common.css}" />
<link rel="stylesheet" th:href="@{/css/web-common.css}" />
<script type="text/javascript" th:src="@{/libs/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/libs/semantic-ui/semantic.min.js}"></script>
<script type="text/javascript" th:src="@{/libs/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/libs/iCheck/icheck.min.js}"></script>
<script type="text/javascript" th:src="@{/libs/validate/validate.js}"></script>
</head>
<body class="login-page">
	<div class="login-header">
		<div th:replace="home/fragments/navbar :: navbar"></div>
	</div>
	<div class="main-content login-content">
		<div class="login-bg">
    		<img class="login-bg" src="/img/hr_login.png">
    	</div>
		<div class="login-box">
			<div class="nav-tabs-custom" style="margin-bottom:15px">
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a href="#studentLoginForm" data-toggle="tab">学生登录</a></li>
	                <li><a href="#managerLoginForm" data-toggle="tab">管理员登录</a></li>
				</ul>
				<div class="tab-content">
					<!-- 学生登录 -->
					<form class="tab-pane active login-form" id="studentLoginForm">
						<div class="form-group has-feedback">
							<input type="text" name="username" class="form-control" placeholder="学号/教工号/管理员" max="14" min="3" require="必填项">
							<span class="glyphicon glyphicon-user form-control-feedback"></span>
						</div>
						<div class="form-group has-feedback">
							<input type="password" name="password" class="form-control" placeholder="密码" require="必填项" nochinese="密码不能包括中文">
							<span class="glyphicon glyphicon-lock form-control-feedback"></span>
						</div>
						<div class="form-group has-feedback vcode">
							<div class="vcode-content">
								<input type="text" name="verification" class="form-control vcode-input" placeholder="验证码" require="必填项" data-position="position-a">
								<span class="fa fa-key vcode-icon form-control-feedback"></span>
							</div>
							<img src="/verificationCode" class="pointer vcode-img">
						</div>
						<div class="row">
							<div class="col-xs-8">
								<div class="checkbox icheck" style="margin-top:0px">
									<label>
										<input type="checkbox" id="rememberMe" name="rememberMe" value="1"> 记住密码
									</label>
								</div>
							</div>
							<div class="col-xs-4">
								<a class="text-right" href="#" id="forgetPasswordBtn">忘记密码?</a>
							</div>
						</div>
						<button id="studentLoginBtn" type="button" class="btn btn-primary btn-lg btn-block mt-5">登 录</button>
					</form>
					<!-- 管理员登录 -->
					<form class="login-form tab-pane" id="managerLoginForm">
			            <div class="form-group has-feedback">
			                <input type="text" name="username"  class="form-control" placeholder="管理员账号"  max="14" min="3" require="必填项" >
			                <span class="glyphicon glyphicon-user form-control-feedback"></span>
			            </div>
			            <div class="form-group has-feedback">
			                <input  name="password"  type="password" class="form-control" placeholder="密码"  require="必填项" nochinese="密码不能包括中文" >
			                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
			            </div>
			            <div class="form-group has-feedback vcode">
			                <div class="vcode-content">
			                    <input type="text"  name="verification"  class="form-control vcode-input" placeholder="验证码" require="必填项" data-position="position-a">
			                    <span class="fa fa-key vcode-icon form-control-feedback"></span>
			                </div>
			                <img src="/verificationCode" class="pointer vcode-img">
			            </div>
			            <div class="row">
			                <div class="col-xs-8">
								<div class="checkbox icheck" style="margin-top:0px">
									<label>
										<input type="checkbox" id="rememberMe" name="rememberMe" value="1"> 记住密码
									</label>
								</div>
							</div>
							<div class="col-xs-4">
								<a class="text-right" href="#" id="forgetPasswordBtn">忘记密码?</a>
							</div>
			            </div>
			            <button id="managerLoginBtn" type="button" class="btn btn-primary btn-lg btn-block mt-5">登 录</button>
			        </form>
				</div>
			</div>
			<div class="text-center">欢迎登录[[${@module.get('sysConfig').SITE_NAME}]]</div>
		</div>
	</div>
	<div th:replace="home/fragments/footer :: copyrightExamWeb"></div>
<script>
	$("#login").hide();
	$(function () {
	  $('input').iCheck({
	    checkboxClass: 'icheckbox_square-blue',
	    radioClass: 'iradio_square-blue',
	    increaseArea: '20%'
	  });
	});
</script>
<script>
	$(function () {
	    $(".vcode-img").on('click', function () {
	        $(this).attr('src', '/verificationCode?' + Math.floor(Math.random() * 100));
	    });
	    $("#forgetPasswordBtn").on('click', function(){
	    	layer.msg("请联系管理员重置");
	    })
	    $("#studentLoginBtn").on('click', function () {
	        if (!doValidForm(studentLoginForm)) {
	            //没有通过验证
	            return;
	        }
	        $.ajax({
	            type: "POST",
	            url: "/login",
	            data: $("#studentLoginForm").serialize(),
	            dataType: "json",
	            success: function (data) {
	                if (data.status == 200) {
	                    layer.msg(data.msg, {
	                        offset: '30%',
	                        time: 800
	                    }, function () {
	                        window.location.href = "/";
	                    });
	                }else{
	                    layer.msg(data.msg, {
	                        icon: 2,
	                        offset: '30%',
	                        time: 2000
	                    });
	                    $("#verificationCode").click();
	                }
	            }
	        });
	    });
	    
	    $("#managerLoginBtn").on('click', function () {
            if (!doValidForm(managerLoginForm)) {
                //没有通过验证
                return;
            }
            $.ajax({
                type: "POST",
                url: "/login",
                data: $("#managerLoginForm").serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.status == 200) {
                        layer.msg(data.msg, {
                            offset: '30%',
                            time: 800
                        }, function () {
                            window.location.href = "/";
                        });
                    }else{
                        layer.msg(data.msg, {
                            icon: 2,
                            offset: '30%',
                            time: 2000
                        });
                        $("#verificationCode").click();
                    }
                }
            });
        });
	
	    $(document).keyup(function (event) {
	        if (event.keyCode == 13) {
	            $("#studentLoginBtn").click();
	        }
	    });
	    $(document).keyup(function (event) {
	        if (event.keyCode == 13) {
	            $("#managerLoginBtn").click();
	        }
	    });
	})
</script>
</body>
</html>